<template>
  <div class="screen-block">
    <div class="content_title">重点品类排名</div>
    <BorderBox1>
      <div id="mainMap1" style="width: 100%; height: 100%"></div>
    </BorderBox1>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { BorderBox1 } from '@kjgl77/datav-vue3';
// import * as echarts from 'echarts';
import { init, EChartsOption } from 'echarts';

const initalECharts4 = () => {
  const myChart = init(document.getElementById('mainMap1') as HTMLDivElement);
  let option: EChartsOption = {
    color: ['#9702fe', '#ff893b', '#37cbff', '#d90051', '#b2e269'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      top: 30,
      right: '20%',
      data: ['美妆', '百度', '教育', '理财', '母婴'],
      textStyle: {
        fontSize: 12,
        color: '#ffffff',
      },
      icon: 'circle',
      itemWidth: 10, // 设置宽度

      itemHeight: 10, // 设置高度

      itemGap: 10, // 设置间距
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 335, name: '美妆' },
          { value: 310, name: '百度' },
          { value: 234, name: '教育' },
          { value: 135, name: '理财' },
          { value: 1548, name: '母婴' },
        ],
      },
    ],
  };
  myChart.setOption(option);
};
onMounted(() => {
  initalECharts4();
});
</script>

<style lang="scss" scoped>
.screen-block {
  width: 100%;
  height: 100%;
  position: relative;
  .content_title {
    width: 200px;
    text-align: center;
    color: #01c4f7;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -100px;
  }
}
</style>
